<template>
    <el-container :style="{ height: containerHeight + 'px' }">
        <!-- 左侧部门树 -->
        <el-main height="">
            <el-aside width="210px" style="border-right: 1px solid #dfe6ec;">
            <left-tree @treeClick="treeClick"></left-tree>
            </el-aside>
        </el-main>

        <!-- 右侧列表 -->
        <el-main>
            <el-form :model="listQuery" label-width="80px" :inline="true" size="small">
                <el-form-item>
                    <el-input placeholder="请输入用户姓名" v-model="listQuery.loginName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button :icon="Search" @click="searchBtn">搜索</el-button>
                    <el-button :icon="Refresh" style="color: #f67670;" @click="resetBtn">重置</el-button>
                    <el-button type="primary" :icon="Plus" @click="addBtn">新增</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData.list" border stripe :height="tableHeight">
                <el-table-column prop="loginName" label="姓名" />
                <el-table-column prop="deptName" label="所属部门" />
                <el-table-column prop="mobile" label="电话" width="150" />
                <el-table-column prop="email" label="邮箱" />
                <el-table-column fixed="right" label="操作" width="270" align="center">
                    <template #default="scope">
                        <el-button size="small" type="primary" :icon="Edit" @click="editBtn(scope.row)">编辑</el-button>
                        <el-button size="small" type="primary" :icon="Setting" @click="assignBtn(scope.row.loginName, scope.row.id)">分配角色</el-button>
                        <el-button size="small" type="danger" :icon="Delete" @click="deleteBtn(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page.sync="listQuery.currentPage"
                :page-sizes="[10, 20, 40, 80, 100]"
                :page-size="listQuery.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="listQuery.total" background>
            >
            </el-pagination>
        </el-main>
    </el-container>
    <!-- 新增，编辑弹框 -->
    <!-- addAndEdit子组件defineExpose暴露了show方法 -->
    <!-- 然后UserList里又引入curd的composables，这个文件里有个const addRef = ref<{ show:(type:string,row?:AddUserModel) => void }>() -->
    <addAndEdit ref="addRef" @save="save"></addAndEdit>
    <!-- 分配角色弹窗 -->
    <assignRole ref="assignRef"></assignRole>
</template>

<script setup lang='ts'>
import { ref,reactive, onMounted, nextTick } from 'vue'
import leftTree from './LeftTree.vue'
import { Plus, Search, Refresh, Edit, Delete, Setting } from '@element-plus/icons-vue'
import addAndEdit from './addAndEdit.vue'
import curd from '@/composables/user/curd'
import userList from '@/composables/user/userList'
import assignRole from './assignRole.vue'

// 容器的高度
const containerHeight = ref(0)
// 表格的高度
const tableHeight = ref(0)
// 表格列表
const { tableData, listQuery, getUserList, treeClick, sizeChange, currentChange, resetBtn} = userList()
// 增删改查的操作
const { searchBtn, addBtn, editBtn, deleteBtn, assignBtn, addRef, assignRef, save } = curd(getUserList)
onMounted(() => {
    nextTick(() => {
        containerHeight.value = window.innerHeight - 100
        tableHeight.value = window.innerHeight - 200
    })
})
</script>
<style scoped lang='scss'>
</style>